<template>
  <div class="mui-content">
    <div class="rating mui-text-right"> <span @click="rat">{{change}}</span></div>
    <div class="ref" ref="ratScoll" :class="addclas">
      <div>
        <div class="infoWrapper" v-for="(item,index) in getratData" :key="index">
          <div class="infoTitle">
            <!--<img src="../../assets/img_user.jpg" alt="">-->
            <div class="name">
              <div class="user">{{item.OpMan.split('(')[0]}}</div>
              <div class="time">{{item.OpDate}}</div>
            </div>
            <div class="right"> <div class=" mui-text-right">评分:</div> <Star :score=item.EvaluatValue></Star></div>
          </div>
          <div class="text">{{item.Remark}}</div>
        </div>
      </div>
    </div>

    <transition name="fade">
      <div class="myRating" v-if="isShow" >
        <div class="ratContent">
          <div class="title">评价</div>
          <div class="star">
            <i class="star-item" v-for="(itemClass,index) in itemClasses" :key='index' :class="itemClass" @click="star(index)"></i>
          </div>
          <div><textarea name="" id="" v-model="textarea"></textarea></div>
          <div class="foot" ><div @click="giveUp">取消</div><div @click="myRat">提交</div></div>
        </div>
      </div>
    </transition>
    <Prompt
      title="错误"
      :msg=mistakeMsg
      confirm="确定"
      v-on:confirm1="confirm1($event)"
      v-if="mistake"
    >
    </Prompt>
  </div>
</template>

<script>
  import  Prompt from '@components/common/Prompt.vue'
  import BScroll from 'better-scroll'
  //星星的长度
  const  LENGTH=5;
  //星星的状态
  const CLS_ON='on';
  const CLS_off='off';
  import Star from '../common/Star'
    export default {
        name: "Rating.vue",
      components:{
          Star,
        Prompt
      },
      data(){
          return{
            UserId:'',
            mistake:false,
            mistakeMsg:'',
            isShow:false,
            score2:0,
            result1:[],
            meRat:'我要评价',
            RatScroll:{},
            textarea:'',
            CSN :'',
            id :0,
            snData:{}

          }
      },
      props:{
        // ratData:{
        //   type:Array,
        // },
        addclas:{
          type:String,
        },
        change:{
          type:String,
          default:"我要评价",
        }
      },
      created(){
        this.$nextTick(()=>{
          this.RatScroll= new BScroll(this.$refs.ratScoll,{probeType:3,click:true});
        })
      },
      methods:{
        confirm1(){
          this.mistake=false
        },
        myRat(){
          let me=this;
          let Data= sessionStorage.getItem("DetailSN");
          let ratData= JSON.parse(sessionStorage.getItem("ratSN"));
          me.snData= JSON.parse(Data);
          console.log(88888)
          console.log(me.snData.TS);
          console.log(me.snData.SN);
          /*进入评价*/
          this.$Global.zcServer.Post({
            IsNeedLogin: 'true',
            Paras:{
              UserId:me.$Global.UserId ,
              Name:'Vue_CourseResource',
              action:"Ext_ResourceStoreEvaluat",
              Data:{
                Remark: me.textarea,
                ResourceStoreSN: me.snData.SN,
                EvaluatValue: me.score2,
                // OpMan: zy_Name,
                // OpTelphone: zy_tel,
                // OpWorkUnit: zy_work,
                Id: ratData.id,
                SN: ratData.SN,
                TS: ratData.TS
              }
            },
            Callback:me.cb_myRat,
            Scope:me,
          });

          this.isShow=false;
        },
        giveUp(){
          this.isShow=false;
        },
        rat(){
          this.isShow=true;
        },
        /*評論星星*/
        star(index){
          this.score2=index+1
        },
        cb_myRat(resJson,scope){
          // let data=JSON.stringify(resJson);
          console.log("评价返回");
          console.log(resJson);
          let me=this
          if(resJson.success==true){
            this.$Global.zcServer.Post({
              IsNeedLogin: 'true',
              Paras:{
                UserId:me.$Global.UserId ,
                Name:'Vue_CourseResource',
                action:"Ext_ResourceEvaluatList",
                Data:{
                  SN:me.snData.SN,
                  Page:1
                }
              },
              Callback:me.cb_ResourceRat,
              Scope:me,
            });
              //this.$router.go(0)
            window.location.reload()
              }else {
            this.mistake=true;
            this.mistakeMsg=resJson.msg
          }
        },
        cb_ResourceRat(resJson,scope){
          console.log(resJson);
          this.ratData=resJson.data.Data;
          this.$store.commit('setratData',this.ratData)
          console.log('评价列表数据')
          console.log(this.ratData);
        }

      },
      computed:{
        itemClasses(){
          let result=[];
          //全星
          let integer=this.score2;
          //遍历全星
          for(let i=0;i<integer;i++){
            result.push(CLS_ON)
          }
          //补齐
          while(result.length<LENGTH){
            result.push(CLS_off)
          }
          // this.result1=result
          return result
        },
        getratData(){
         return this.$store.getters.ratData
        }
      }
    }
</script>

<style scoped>
  .star{
    /*font-size: 0;*/
    padding-top: 5px;
  }
  .star .star-item{
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    margin-bottom: 8px;
  }
  .star .star-item:last-child{
    margin-right: 0;
  }
  /* 二种图片类型*/
  .star .on{
    background-image: url('../../assets/img/star1.png');
  }
  .star .off{
    background-image: url('../../assets/img/star2.png');
  }
  .collectWrapper .star3{
    display: inline-block;
    width: 16px;
    height: 15px;
    background-size: 16px 15px;
    background-image: url('../../assets/img/wdsc.png');
  }
.mui-content .rating span{
  padding: 3px 10px;
  background-color: rgb(70,180,250);
  color: white;
  display: inline-block;
  margin: 5px 2%;
  font-size: 0.8rem;
  border-radius: 10px;

}
.mui-content .rating {
  background-color: white;
  padding-bottom: 30px;
}
.mui-content .infoWrapper{
  min-height: 120px;
  border-bottom: 1px solid gainsboro;
  background-color: white;
}
  .mui-content .infoWrapper .infoTitle{

    width: 100%;
    background-color: white;
    padding: 3% 2%;
    font-size: 14px;
    display: flex;
  }

.mui-content .infoWrapper img{
  width: 2rem;
  height: 2rem;
  background-size: 35px 35px;
  border-radius: 50%;

}
.mui-content .infoWrapper .infoTitle .name{
  width: 65%;
  color:#717171;
}
.mui-content .infoWrapper .infoTitle .name .user{
  font-size: 1.1rem;
}
.mui-content .infoWrapper .infoTitle .right{
  font-size: 14px;
  display: flex;

}
.mui-content .infoWrapper .infoTitle .right .mui-text-right{
  padding-top: 3px;
  color:#717171;
  text-align: right;
}
.mui-content .infoWrapper .text{
  padding: 0px 15px 0px 2%;
  background-color: white;
}
  .mui-content .myRating{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color:rgba(111,111,111,0.6);
    left: 0;
    top:0;
    display: flex;
    align-items: center;
    justify-content: center;


  }
.mui-content .myRating .ratContent{
  width: 80%;
  height: 13.3rem;
  background-color: white;
  line-height: 100%;
  text-align: center;
  border-radius: 10px;
}
.mui-content .myRating .ratContent .title{
  height: 2.2rem;
  line-height:  2.6rem;
  color: #57bbfa;
}
.mui-content .myRating .ratContent textarea{
  width: 90%;
  height: 5.1rem;
}
.mui-content .myRating .ratContent .foot div{
 float: left;
  width: 50%;
  text-align: center;
  border-top: 1px solid rgba(111,111,111,0.2);
  height: 2.5rem;
  line-height: 2.5rem;
  color: #57bbfa;
  position: relative;
  font-size: 0.9rem;
  margin-top: -5px;
}
.mui-content .myRating .ratContent .foot div:first-child:after{
  content: '';
  position: absolute;
  right: 0;
  top: 28%;
  left: auto;
  bottom: auto;
  width: 1px;
  height: 44%;
  background-color: #b5b5b5;
  display: block;
  z-index: 15;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}
  /*彈出框*/
  .fade-enter-active, .fade-leave-active {
    transition: opacity .3s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0
  }
  .fade-enter-to, .fade-leave {
    opacity: 1;
  }
  /*滚动*/
  .mui-content .ref{
    width: 100%;
    /*height: 37.5vh;*/
    position: absolute;
    top:23.4rem;
    /*margin-top: 50px;*/
    bottom: 0px;

    overflow: hidden;
    background-color: white;
  }
 .mui-content .article1{
   top:14rem;
   background-color: white;
 }

</style>
